<script setup>
import { ElMessage } from "element-plus"
import { reactive, ref, onMounted } from "vue"
import { base_download } from '../../config.js'
import { DetectResultSelectAllService } from "@/api/detect_result.js"

const pagination = reactive({
    page: 1,
    per_page: 10,
    total_pages: 1,
    total_items: 1,
})

const detect_results = reactive([])

const table_status = ref(true)

const detectResultSelectAll = async () => {
    table_status.value = true
    let data = await (await DetectResultSelectAllService(pagination)).data
    // console.log(data)
    pagination.page = data.current_page
    pagination.per_page = data.per_page
    pagination.total_pages = data.total_pages
    pagination.total_items = data.total_items
    detect_results.value = data.detect_results
    // console.log(detect_results)
    table_status.value = false
    ElMessage.success("加载成功")
}

onMounted(() => {
    detectResultSelectAll(pagination)
});

</script>

<template>
    <div class="container">
        <el-table :data="detect_results.value" stripe class="detectresult-table" height="calc(100% - 70px)" :loading="table_status">
            <el-table-column prop="user_name" label="用户名" sortable />
            <el-table-column prop="detect_time" label="检测时间" sortable />
            <el-table-column prop="image" label="原图片">
                <template #default="{ row }">
                    <video v-if="row?.batch != null" controls loop="False" style="width: 100px; height: 100px;">
                        <source :src="base_download + '/upload/' + row?.upload_path" />
                    </video>
                    <el-image v-else :src="base_download + '/upload/' + row?.upload_path"
                        style="width: 100px; height: 100px;"
                        :preview-src-list="[base_download + '/upload/' + row.upload_path]" preview-teleported="true" />
                </template>
            </el-table-column>
            <el-table-column prop="image" label="检测图片">
                <template #default="{ row }">
                    <video v-if="row?.batch != null" controls loop="False" style="width: 100px; height: 100px;">
                        <source :src="base_download + '/result/' + row?.result_path" />
                    </video>
                    <el-image v-else :src="base_download + '/result/' + row?.result_path"
                        style="width: 100px; height: 100px;"
                        :preview-src-list="[base_download + '/result/' + row.result_path]" preview-teleported="true" />
                </template>
            </el-table-column>
            <el-table-column prop="speed" label="检测用时(ms)" />
            <el-table-column prop="imgsz" label="尺寸" />
            <el-table-column prop="conf" label="置信度阈值" />
            <el-table-column prop="iou" label="交并比阈值" />
            <el-table-column prop="max_det" label="最大目标数" />
            <el-table-column prop="augment" label="数据增强" />
            <el-table-column prop="agnostic_nms" label="非极大值抑制" />
            <el-table-column prop="retina_masks" label="高分辨率分割掩膜" width="80"/>
            <el-table-column prop="classes" label="目标类别" />
            <el-table-column prop="batch" label="批次大小" width="60"/>
            <el-table-column prop="vid_stride" label="帧率采样步长" width="80"/>
        </el-table>
        <div class="demo-pagination-block">
            <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.per_page"
                :page-sizes="[10, 20, 50, 100]" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="pagination.total_items"
                @size-change="detectResultSelectAll" @current-change="detectResultSelectAll" />
        </div>
    </div>
</template>

<style>
.container {
    width: 100%;
    height: calc(100vh - 70px);
    padding: 20px;
}

.detectresult-table {
    width: 100%;
    /* height: calc(100% - 50px); */
    margin-bottom: 20px;
    text-align: center;
}

.pagination-block {
    height: 50px;
    width: 100%;
}
</style>